<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form inline>
                <el-form-item label="老师:">
                    <el-select v-model="searchQuery.teacher_id" filterable placeholder="请选择老师" class="w-150">
                        <el-option :value="0" label="全部" />
                        <el-option v-for="item in teachers" :key="item.id" :value="item.id" :label="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="日期:">
                    <el-date-picker v-model="searchQuery.date" type="daterange" range-separator="至" value-format="yyyy-MM-dd" class="w-250" />
                    <el-button icon="el-icon-arrow-up" @click="changeMonth(-1)">上月</el-button>
                    <el-button icon="el-icon-arrow-down" style="margin-left: 0;" @click="changeMonth(1)">下月</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="teacherCourses" border style="width: 100%;" header-cell-class-name="table-header">
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="teacher_name" label="老师" />
            <el-table-column prop="arrange_count" label="排课次数" />
            <el-table-column prop="course_count" label="消课数量" />
            <el-table-column prop="course_money" label="消课金额" />"
            <el-table-column prop="commission" label="佣金" />
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" icon="el-icon-view" @click="showDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="月度消课详情" center :visible.sync="visible" width="1000px" :close-on-click-modal="false">
            <el-table :data="courses" border max-height="600px">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="class.name" label="班级名称" />
                <el-table-column prop="course.name" label="课程名称" />
                <el-table-column prop="date" label="日期" />
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="attend_student_num" label="实到人数" width="80" />""
                <el-table-column prop="total_course_num" label="共消课时" width="80" />
                <el-table-column prop="total_course_money" label="共消课金额" width="100" />
                <el-table-column prop="commission" label="佣金" width="100" />
            </el-table>
        </el-dialog>
</div>
</template>
<script>
    import teacherApi from '@/api/teacher'
    import dayjs from 'dayjs'

    export default {
        name: 'TeacherCourse',
        data() {
            return {
                visible: false,
                teachers: [], // 讲师列表
                teacherCourses: [], // 教师课程统计列表
                courses: [], // 课程列表
                searchQuery: {
                    teacher_id: 0,
                    date: [
                        dayjs().startOf('month').format('YYYY-MM-DD'), // 当月的第一天
                        dayjs().endOf('month').format('YYYY-MM-DD') // 当月的最后一天
                    ]
                }
            }
        },
        created() {
            teacherApi.list().then(res => { this.teachers = res.data }).catch(() => {})
            this.getList()
        },
        methods: {
            search() {
                // 搜索逻辑
                this.getList()
            },
            getList() {
                const searchKeywords = {
                    beginDate: this.searchQuery.date[0],
                    endDate: this.searchQuery.date[1],
                    teacherId: this.searchQuery.teacher_id
                }
                teacherApi.count_course(searchKeywords)
                .then(res => {
                    this.teacherCourses = res.data
                }).catch(() => {})
            },
            showDetail(row) {
                this.visible = true
                // 获取详情数据
                const searchKeywords = {
                    beginDate: this.searchQuery.date[0],
                    endDate: this.searchQuery.date[1],
                    teacherId: row.teacher_id
                }
                teacherApi.course_list(searchKeywords).then(res => {
                    this.courses = res.data
                }).catch(() => {
                    //
                })
            },
            changeMonth(type) {
                const [start] = this.searchQuery.date
                const newStart = dayjs(start).add(type, 'month').startOf('month')
                const newEnd = dayjs(start).add(type, 'month').endOf('month')
                this.searchQuery.date = [newStart.format('YYYY-MM-DD'), newEnd.format('YYYY-MM-DD')]
                this.search()
            }
        }
    }
</script>
